<template>
    <div class="main-content">
        <div style="display: flex; grid-gap: 10px;">
            <div style="width: 150px; height: 100%; position: sticky; top: 0;;" class="card">
                <!-- 添加了@click事件来处理点击 -->
                <div 
                    class="category-item"
                    :class="{ 'category-item-active': activeCategory === category }"
                    v-for="(category, index) in categories"
                    :key="index"
                    @click="setActiveCategory(category)"
                >
                    {{ category }}
                </div>
            </div>


            <div style="flex: 1" class="card">

                <div class="blog-box">
                    <div style="flex: 1; width: 0;">
                        <div class="blog-title" @click="$router.push('/front/blogDetail')">适合小公司的自动化部署脚本</div>
                        <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 14px;">在小小的公司里面,挖呀挖呀挖。快挖不动了,一件事重复个5次,还在人肉手工,身体和心理就开始不舒服了,我不想再干了啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
                        <div style="display: flex;">
                            <div style="flex: 1; font-size: 13px;">
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-user">懒神</i></span>
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-view">5</i></span>
                                <span style="color: #666;"><i class="el-icon-s-opportunity">100</i></span>
                            </div>
                            <div style="width: fit-content">
                                <el-tag type="primary" style="margin-right: 10px;">综合</el-tag>
                                <el-tag type="primary" style="margin-right: 10px;">前端</el-tag>
                            </div>
                        </div>
                    </div>
                    <div style="width: 140px;">
                        <img style="width: 100%; height: 80px; border-radius: 5px;" src="../../assets/images/pc1.png"> 
                    </div>
                </div>
         
                <div class="blog-box">
                    <div style="flex: 1; width: 0;">
                        <div class="blog-title">聊聊我的前端面试心得</div>
                        <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 14px;">最近的面试中有一个面试官问我按钮级别的权限怎么控制,我说直接v-if啊,他说不够好,我说我们项目中按钮级别的权限控制情况不多,所以v-if就够了,</div>
                        <div style="display: flex;">
                            <div style="flex: 1; font-size: 13px;">
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-user">伟神</i></span>
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-view">55</i></span>
                                <span style="color: #666;"><i class="el-icon-s-opportunity">66</i></span>
                            </div>
                            <div style="width: fit-content">
                                <el-tag type="primary" style="margin-right: 10px;">面试</el-tag>
                                <el-tag type="primary" style="margin-right: 10px;">前端</el-tag>
                            </div>
                        </div>
                    </div>
                    <div style="width: 140px;">
                        <img style="width: 100%; height: 80px; border-radius: 5px;" src="../../assets/images/pc2.png"> 
                    </div>
                </div>

                <div class="blog-box">
                    <div style="flex: 1; width: 0;">
                        <div class="blog-title">程序员更需要钝感力</div>
                        <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 14px;">程序员每个人都是聪明的，都是反应灵敏的。 一个同事说过这么一句话："都当的了程序员,大家都是聪明人,不过有些事不好21312312</div>
                        <div style="display: flex;">
                            <div style="flex: 1; font-size: 13px;">
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-user">队长</i></span>
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-view">2</i></span>
                                <span style="color: #666;"><i class="el-icon-s-opportunity">0</i></span>
                            </div>
                            <div style="width: fit-content">
                                <el-tag type="primary" style="margin-right: 10px;">Java</el-tag>
                                <el-tag type="primary" style="margin-right: 10px;">后端</el-tag>
                            </div>
                        </div>
                    </div>
                    <div style="width: 140px;">
                        <img style="width: 100%; height: 80px; border-radius: 5px;" src="../../assets/images/pc3.png"> 
                    </div>
                </div>

                <div class="blog-box">
                    <div style="flex: 1; width: 0;">
                        <div class="blog-title">从零开始写一个Vue2+Element ui的前端项目</div>
                        <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 14px;">接触Vue2也有一年的时间了,除了刚开始用Vue2做了一个小小的项目,其后一直没有机会在项目中真正使用Vue2</div>
                        <div style="display: flex;">
                            <div style="flex: 1; font-size: 13px;">
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-user">曾哥</i></span>
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-view">23</i></span>
                                <span style="color: #666;"><i class="el-icon-s-opportunity">11</i></span>
                            </div>
                            <div style="width: fit-content">
                                <el-tag type="primary" style="margin-right: 10px;">Vue</el-tag>
                                <el-tag type="primary" style="margin-right: 10px;">前端</el-tag>
                            </div>
                        </div>
                    </div>
                    <div style="width: 140px;">
                        <img style="width: 100%; height: 80px; border-radius: 5px;" src="../../assets/images/pc1.png"> 
                    </div>
                </div>

                <div class="blog-box">
                    <div style="flex: 1; width: 0;">
                        <div class="blog-title">Windows大作业模仿坦克动荡</div>
                        <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 14px;">SDK模式制作坦克动荡小游戏,利用了多线程实现了对两个坦克控制</div>
                        <div style="display: flex;">
                            <div style="flex: 1; font-size: 13px;">
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-user">懒神</i></span>
                                <span style="color: #666; margin-right: 20px;"><i class="el-icon-view">1000</i></span>
                                <span style="color: #666;"><i class="el-icon-s-opportunity">77</i></span>
                            </div>
                            <div style="width: fit-content">
                                <el-tag type="primary" style="margin-right: 10px;">C++</el-tag>
                            </div>
                        </div>
                    </div>
                    <div style="width: 140px;">
                        <img style="width: 100%; height: 80px; border-radius: 5px;" src="../../assets/images/pc3.png"> 
                    </div>
                </div>
            </div>

            
            <div style="width: 260px">
                <div class="card">
                    <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">欢迎您!😊</div>
                    <div style="color: #666;">冲刺冲刺,赶紧做完课设吧!</div>
                </div>

                <div style="margin-top: 10px;" class="card">
                    <div style="display: flex; align-items: center; color:#666; padding-bottom: 10px; border-bottom: 1px solid #ddd;">
                        <div style="font-size: 20px; flex: 1;">文章榜单</div>
                        <div style="font-size: 12px;"><i class="el-icon-refresh">换一换</i></div>
                    </div>
                    <div>
                        <div style="margin: 20px 0;" class="line3"><span style="color: gold;">1</span><span style="color: #666; margin-left: 7px;">从零开始写一个Vue2+Element ui的前端项目</span></div>
                        <div style="margin: 20px 0;" class="line3"><span style="color: silver;">2</span><span style="color: #666; margin-left: 7px;">聊聊我的前端面试心得</span></div>
                        <div style="margin: 20px 0;" class="line3"><span style="color: darkgoldenrod;">3</span><span style="color: #666; margin-left: 7px;">程序员更需要钝感力</span></div>
                        <div style="margin: 20px 0;" class="line3"><span>4</span><span style="color: #666; margin-left: 7px;">Windows大作业模仿坦克动荡</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import router from '@/router';

export default {
    name: '',
    data() {
        return {
            categories: ['综合','C++', 'Python', '前端', '后端', '大数据', '算法', '人工智能', '开发工具', '面试'],
            activeCategory: '综合',
        };
    },
    methods: {
        setActiveCategory(category) {
            this.activeCategory = category;
        }
    }
}
</script>

<style scoped>
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.blog-box{
    display: flex; 
    grid-gap: 15px;
    padding: 10px 0; 
    border-bottom: 1px solid #666666;
}
.blog-box:first-child{
    padding-top: 0;
}
.blog-title{
   font-size: 18px; 
   font-weight: bold; 
   margin-bottom: 10px;
   cursor: pointer;
}
.blog-title:hover{
    color: #2a60c9;
}
</style>